<script lang="ts" setup name="Dicts">
import { dictApi } from '@/api/index'
import { useDictStore } from '@/store/index'
import { useI18n } from 'vue-i18n';

const { t } = useI18n()
const dictStore = useDictStore()

const dictCurrentPage = ref(1)
const dictItemCurrentPage = ref(1)
const dictPageSize = ref(10)
const dictItemPageSize = ref(10)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const dictSpan = ref(24)
const dictItemSpan = computed(() => {
    return 24 - dictSpan.value
})
const dictTableData = ref([])
const dictItemTableData = ref([])
const searchDict = async () => {
    const { data } = await dictApi.searchDictApi(null)
    if (data.code === 200) {
        dictTableData.value = data.data
    } else {
        ElMessage.error(data.message)
    }
}

const searchDictItem = async (query: any) => {
    const { data } = await dictApi.searchDictItemApi(query)
    if (data.code === 200) {
        dictItemTableData.value = data.data
    } else {
        ElMessage.error(data.message)
    }
}

const dictRowClick = (row: any) => {
    dictSpan.value = 12
    searchDictItem({ dictId: row.id })
    dictItemForm.value.dictId = row.id
}

const dictDialogVisible = ref(false)
enum DictDialogType {
    ADD, EDIT
}
const dictDialogType = ref(DictDialogType.ADD)
const dictDialogTitle = computed(() => {
    return dictDialogType.value == DictDialogType.ADD ? t('common.add') : t('common.edit')
})
const initDictForm = {
    id: '',
    label: '',
    value: '',
    enabled: true
}
const dictForm = ref(initDictForm)

const addDictButtonClick = () => {
    dictDialogVisible.value = true
    dictDialogType.value = DictDialogType.ADD
}

const editDictButtonClick = (row: any) => {
    dictDialogVisible.value = true
    dictDialogType.value = DictDialogType.EDIT
    dictForm.value = row
    console.log(dictForm.value)
}

const submitDictForm = async () => {
    switch (dictDialogType.value) {
        case DictDialogType.ADD:
            await addDict(); break;
        case DictDialogType.EDIT:
            await updateDict(); break;
    }
    dictDialogVisible.value = false
    dictForm.value = initDictForm
    searchDict()
}

const addDict = async () => {
    const { data } = await dictApi.createDictApi(dictForm.value)
    if (data.code === 200) {
        ElMessage.success(data.message)
    } else {
        ElMessage.error(data.message)
    }
}

const updateDict = async () => {
    const { data } = await dictApi.updateDictApi(dictForm.value)
    if (data.code === 200) {
        ElMessage.success(data.message)
    } else {
        ElMessage.error(data.message)
    }
}

const deleteDictButtonClick = async (row: any) => {
    const { data } = await dictApi.deleteDictByIdApi(row.id)
    if (data.code == '200') {
        ElMessage.success(data.message)
        searchDict()
    } else {
        ElMessage.error(data.message)
    }
}

const dictDialogCloseEvent = (done: () => void) => {
    dictDialogVisible.value = false
    dictForm.value = initDictForm
    done()
}


const dictItemDialogVisible = ref(false)
const initDictItemForm = {
    id: '',
    dictId: '',
    label: '',
    value: '',
    enabled: true
}
const dictItemForm = ref(initDictItemForm)
enum DictItemDialogType {
    Add,
    Edit
}
const dictItemDialogType = ref(DictItemDialogType.Add)
const dictItemDialogTitle = computed(() => {
    return dictItemDialogType.value === DictItemDialogType.Add ? t('common.add') : t('common.edit')
})
const addDictItemButtonClick = () => {
    dictItemDialogVisible.value = true
    dictItemDialogType.value = DictItemDialogType.Add
}

const editDictItemButtonClick = (row: any) => {
    dictItemDialogVisible.value = true
    dictItemDialogType.value = DictItemDialogType.Edit
    dictItemForm.value = row
}

const submitDictItemForm = async () => {
    switch (dictItemDialogType.value) {
        case DictItemDialogType.Add:
            await addDictItem();
            break;
        case DictItemDialogType.Edit:
            await editDictItem();
            break;
    }
    searchDictItem({ dictId: dictItemForm.value.dictId })
    dictItemDialogVisible.value = false
    dictItemForm.value = initDictItemForm
}

const addDictItem = async () => {
    const { data } = await dictApi.createDictItemApi(dictItemForm.value)
    if (data.code == 200) {
        ElMessage.success(data.message)
    } else {
        ElMessage.error(data.message)
    }
}

const editDictItem = async () => {
    const { data } = await dictApi.updateDictItemApi(dictItemForm.value)
    if (data.code == 200) {
        ElMessage.success(data.message)
    } else {
        ElMessage.error(data.message)
    }
}

const deleteDictItemButtonClick = async (row: any) => {
    const { data } = await dictApi.deleteDictItemByIdApi(row.id)
    if (data.code == 200) {
        ElMessage.success(data.message)
        searchDictItem({ dictId: row.dictId })
    } else {
        ElMessage.error(data.message)
    }
}

const dictItemCardCloseEvent = () => {
    dictSpan.value = 24
}

const dictItemDialogCloseEvent = (done: () => void) => {
    dictItemDialogVisible.value = false
    dictItemForm.value = initDictItemForm
    done()
}

onMounted(() => {
    searchDict()
    dictStore.getDict(['status'])
})
</script>

<template>
    <div h-full>
        <el-row :gutter="20" h-full>
            <el-col :span="dictSpan">
                <el-card h-full >
                    <div flex flex-col gap-col-4 bg-amber h-full sty>
                        <div bg-amber flex-shrink-0>
                            {{ t('dict.dict') }}
                        </div>
                        <div text-end flex-shrink-0>
                            <el-button @click="addDictButtonClick">{{ t('common.add') }}</el-button>
                        </div>
                        <div flex-1>
                            <el-table :data="dictTableData" style="width: 100%">
                                <el-table-column prop="label" :label="t('common.label')" show-overflow-tooltip>
                                    <template #default="scope">
                                        <el-link type="primary" @click="dictRowClick(scope.row)">
                                            {{ scope.row.label }}
                                        </el-link>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" :label="t('common.value')" show-overflow-tooltip />
                                <el-table-column :label="t('common.status')">
                                    <template #default="scope">
                                        <ElTag :type="scope.row.enabled ? 'success' : 'danger'">
                                            {{ scope.row.enabled ? t('common.enable') : t('common.disable') }}
                                        </ElTag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createTime" :label="t('common.createTime')"
                                    show-overflow-tooltip />
                                <el-table-column :label="t('common.operation')" width="200">
                                    <template #default="scope">
                                        <el-button-group>
                                            <el-button text type="primary" @click="editDictButtonClick(scope.row)">
                                                <i class="i-ep-edit" /> {{ t('common.edit') }}
                                            </el-button>
                                            <el-popconfirm :title="t('common.delete_confirm')"
                                                @confirm="deleteDictButtonClick(scope.row)">
                                                <template #reference>
                                                    <el-button text type="danger">
                                                        <i class="i-ep-delete" /> {{ t('common.delete') }}
                                                    </el-button>
                                                </template>
                                            </el-popconfirm>
                                        </el-button-group>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div flex-shrink-0>
                            <el-pagination v-model:current-page="dictCurrentPage" v-model:page-size="dictPageSize"
                                :page-sizes="[100, 200, 300, 400]" layout="total, sizes, ->,prev, pager, next, jumper"
                                :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="dictItemSpan">
                <el-card>
                    <template #header>
                        <div class="flex flex-justify-between">
                            <span>{{ t('dict.dictItem') }}</span>
                            <el-button text @click="dictItemCardCloseEvent()"><i class="i-ep-close" /></el-button>
                        </div>
                    </template>
                    <el-button @click="addDictItemButtonClick()">
                        {{ t('common.add') }}
                    </el-button>
                    <el-table :data="dictItemTableData" style="width: 100%">
                        <el-table-column prop="label" :label="t('common.label')" show-overflow-tooltip />
                        <el-table-column prop="value" :label="t('common.value')" />
                        <el-table-column :label="t('common.status')">
                            <template #default="scope">
                                {{ dictStore.getDictItemsLabel('status', scope.row.enabled) }}
                            </template>
                        </el-table-column>
                        <el-table-column :label="t('common.operation')" width="200">
                            <template #default="scope">
                                <el-button-group>
                                    <el-button type="primary" text @click="editDictItemButtonClick(scope.row)">
                                        <i class="i-ep-edit" /> {{ t('common.edit') }}
                                    </el-button>
                                    <el-popconfirm :title="t('common.delete_confirm')"
                                        @confirm="deleteDictItemButtonClick(scope.row)">
                                        <template #reference>
                                            <el-button type="danger" text>
                                                <i class="i-ep-delete" /> {{ t('common.delete') }}
                                            </el-button>
                                        </template>
                                    </el-popconfirm>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </el-table>
                    <template #footer>
                        <el-pagination v-model:current-page="dictItemCurrentPage" v-model:page-size="dictItemPageSize"
                            :page-sizes="[100, 200, 300, 400]" layout="total, sizes,->, prev, pager, next, jumper"
                            :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </template>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog v-model="dictDialogVisible" :title="dictDialogTitle" width="500"
            :before-close="dictDialogCloseEvent">
            <el-form :model="dictForm" label-width="auto">
                <el-form-item :label="t('common.label')">
                    <el-input v-model="dictForm.label" />
                </el-form-item>
                <el-form-item :label="t('common.value')">
                    <el-input v-model="dictForm.value" />
                </el-form-item>
                <el-form-item :label="t('common.status')">
                    <el-switch v-model="dictForm.enabled" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitDictForm()">
                        {{ t('common.submit') }}
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="dictItemDialogVisible" :title="dictItemDialogTitle" width="500"
            :before-close="dictItemDialogCloseEvent">
            <el-form :model="dictItemForm" label-width="auto">
                <el-form-item :label="t('common.label')">
                    <el-input v-model="dictItemForm.label" />
                </el-form-item>
                <el-form-item :label="t('common.value')">
                    <el-input v-model="dictItemForm.value" />
                </el-form-item>
                <el-form-item :label="t('common.status')">
                    <el-switch v-model="dictItemForm.enabled" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitDictItemForm()">
                        {{ t('common.submit') }}
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss"></style>